<script setup lang="ts">
import { nextTick, ref, computed } from 'vue';
import { hideLoading, showLoading, usePullDownRefresh, stopPullDownRefresh, getCurrentInstance } from '@tarojs/taro';

const {
    router: {
        params: { type }
    }
}: any = getCurrentInstance();

definePageConfig({
    navigationBarTitleText: '我的优惠券',
    enablePullDownRefresh: true
});
import { useNurseUser } from '@/service';
import { storeToRefs } from 'pinia';
import { useAuthStore } from '@/store';

import { useDayjs } from '@/hooks/common';

const { nurseUser } = storeToRefs(useAuthStore());

const { $dayjs } = useDayjs();

const { getSpecialList } = useNurseUser();

const list = ref();

usePullDownRefresh(() => {
    getData();
    stopPullDownRefresh();
});

getData();

const date = computed(() => (createTime: string) => {
    if (createTime) {
        const date = $dayjs(createTime).format('YYYY-MM-DD');
        return date;
    }
    return '';
});

const checked = computed(() => {
    return list?.value?.find((item: any) => item.checked);
});

async function getData() {
    showLoading({ title: '正在请求数据...' });

    const { error, success } = await getSpecialList({ pageNo: 1, pageSize: 10, userId: nurseUser.value.id });

    if (!error && success?.records) {
        success.records = success.records.map((item: any) => {
            return { ...item, checked: false };
        });
        list.value = [...success.records];
    }

    hideLoading();
}

function change(item: any) {
    nextTick(() => {
        list.value.forEach((element: { checked: boolean }) => {
            element.checked = false;
        });
        item.checked = true;
    });
}

function ok() {
    const item = checked.value;
    // item
}
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="我的优惠券" showLeft /> -->
        <view class="w-375px flex-col-center">
            <nut-empty v-if="list?.length == 0" description="暂无优惠券"></nut-empty>
            <view class="w-360px">
                <nut-cell v-for="item in list" class="flex-center justify-between w-full" @click="change(item)">
                    <view class="w-2/7">
                        <nut-price :price="item.amt" size="large" />
                        <view class="text-xs">
                            {{ item.description }}
                        </view>
                    </view>
                    <view class="w-4/7 flex-col-center">
                        <nut-ellipsis class="text-17px text-primary text-black font-bold" direction="end"
                            :content="item.name"></nut-ellipsis>
                        <view class="text-xs">开始时间：{{ date(item.beginTime) }}</view>
                        <view class="text-xs">结束时间：{{ date(item.endTime) }}</view>
                    </view>
                    <view v-if="type == '1'" class="w-1/7">
                        <nut-checkbox v-model="item.checked" />
                    </view>
                </nut-cell>
            </view>
        </view>
        <view v-if="type == '1'"
            class="w-full bg-white h-50px z-36 pos-fixed pos-bottom-0px pos-left-0 flex-col-center">
            <view class="mr-2 flex justify-end w-full items-center">
                <view v-if="checked?.amt" class="mr-2">
                    已选一张，可减
                    <nut-price :price="checked?.amt" />
                </view>
                <nut-button class="important:w-110px font-bold text-lg" type="primary" @click="ok">确定</nut-button>
            </view>
        </view>
    </basic-layout>
</template>
